<template>
  <div class="gao">
    <div class="oneboxs">
      <div class="cen_time">
        <div class="daymonth">
          <span class="daytian">{{ detailList.day }}</span>
          <span class="month"> {{ detailList.month }}月</span>
        </div>
        <div style="margin-left: 5%; margin-top: 10%; color: #ccc">{{ detailList.time }}</div>
      </div>
      <div class="centertexts">
        <div>
          <div v-if="isExpanded" class="cen_textss">
            {{ detailList.content }}
          </div>
          <div class="cen_text" v-else>
            {{ detailList.content }}
          </div>
          <div style="display: flex;justify-content: end;color: red;" v-if="!isExpanded"
            v-show="detailList.content.length > 115">
            <div @click="isExpanded = true" style="width: 50px;cursor: pointer;">展开</div>
          </div>
          <div style="display: flex;justify-content: end;color: red;" v-if="isExpanded"
            v-show="detailList.content.length > 115">
            <div @click="isExpanded = false" style="width: 50px;cursor: pointer;">收起</div>
          </div>
        </div>
        <div>
          <div class="img" v-if="myimg">
            <div class="img_top">
              <img :src="myimg" alt="" />
            </div>
            <div class="img_bom">
              <el-icon @click="jian">
                <CaretLeft />
              </el-icon>
              <div class="my_img" v-for="(item, i) in detailList.images" @click="xz(i)">
                <img :src="item" alt="" :key="i" />
                <div class="mss" v-if="clk != i"></div>
              </div>
              <el-icon @click="jia">
                <CaretRight />
              </el-icon>
            </div>
            <h3 class="tjindex" v-if="posstion < 3">
              <span @click="recommend" style="cursor: pointer;">{{ tjhome == 1 ? '取消推荐到首页' : '推荐该图片到首页' }}</span>
              <!-- /<span @click="recommenddel">取消推荐到首页</span> -->
            </h3>
          </div>
        </div>
        <div class="zan" @click="likess(detailList.id)">
          <div class="szan" v-if="detailList.is_like == 0">
            <img src="@/assets/nozan.png" alt="">
          </div>
          <div class="szan" v-else>
            <img src="@/assets/zan.png" alt="">
          </div>
          <div class="le">{{ detailList.like }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { listsdetail, likes, recommend_add, recommend_del, recommend_status } from '@/api/team'
import { ElMessage } from 'element-plus'
let Router = useRouter()
let Route = useRoute()
let posstion: any = localStorage.getItem('position')
console.log(posstion, 'poss')
let tjhome: any = ref('')

let detailList: any = ref<any>({
  content: '',
  day: '',
  id: '',
  images: [],
  is_like: '',
  like: '',
  month: '',
  nickname: '',
  time: ''
})
const deList = async () => {
  let data: any = {
    id: Route.query.e
  }
  await listsdetail(data).then(res => {
    console.log(res.data.data.images[0], 'resss')
    detailList.value = res.data.data
    myimg.value = res.data.data.images[0]
    stuts()
  })
}
deList()
const likess = (id: any) => {
  likes({ id: id }).then(res => {
    console.log(res, 'dianzan')
    let data: any = {
      id: Route.query.e
    }
    listsdetail(data).then(res => {
      console.log(res.data.data.images[0], 'resss')
      detailList.value = res.data.data
    })
  })
}
const clk = ref(0)
const isExpanded = ref(false)
let flag: any = ref(false)
const myimg: any = ref('')
function xz(i: number) {
  console.log(i)
  clk.value = i
  myimg.value = detailList.value.images[clk.value]
  console.log(myimg.value, ';;;;;')
  stuts()
}
function jian() {
  if (clk.value > 0) {
    clk.value--
    myimg.value = detailList.value.images[clk.value]
  } else {
    clk.value = detailList.value.images.length - 1
    myimg.value = detailList.value.images[clk.value]
  }
  stuts()
}
function jia() {
  if (clk.value < detailList.value.images.length - 1) {
    clk.value++
    myimg.value = detailList.value.images[clk.value]
  } else {
    clk.value = 0
    myimg.value = detailList.value.images[clk.value]
  }
  stuts()
}
const stuts = () => {
  recommend_status({ id: detailList.value.id, cover: myimg.value }).then(res => {
    console.log(res, 'stutas')
    tjhome.value = res.data.data.status
  })
}
const recommend = () => {
  //点击推荐把图片推荐到首页
  if (tjhome.value == 0) {
    recommend_add({ id: detailList.value.id, cover: myimg.value }).then(res => {
      console.log(res, '推荐到首页')
      ElMessage({
        type: 'warning',
        message: '推荐图片' + res.data.msg,
      })
      tjhome.value = 1
    })
  } else {
    recommend_del({ id: detailList.value.id, cover: myimg.value }).then(res => {
      console.log(res, '取消推荐')
      ElMessage({
        type: 'warning',
        message: '取消推荐' + res.data.msg,
      })
      tjhome.value = 0
    })
  }
  console.log(myimg.value, '推荐的图片')
  console.log(detailList.value.id, '推荐的id')
}
const recommenddel = () => {
  //点击推荐把图片推荐到首页
  recommend_del({ id: detailList.value.id, cover: myimg.value }).then(res => {
    console.log(res, '取消推荐')
    ElMessage({
      type: 'warning',
      message: '取消推荐' + res.data.msg,
    })
  })
  console.log(myimg.value, '推荐的图片')
  console.log(detailList.value.id, '推荐的id')
}
</script>

<style lang="scss" scoped>
.oneboxs {
  width: 1080px;
  // height: 1200px;
  display: flex;
  position: relative;
  border-bottom: #9e9e9e 1px solid;
  padding: 20px 0;
}

.gao {
  width: 1080px;
  // height: 1000px;
  margin: 0 auto;
  background-color: #fff;

}

.img {
  .img_bom {
    display: flex;
    align-items: center;
    margin-top: 19px;

    .my_img {
      position: relative;
      width: 89px;
      height: 89px;
      margin-right: 8px;
      border-radius: 8px;

      .mss {
        position: absolute;
        width: 89px;
        height: 89px;
        border-radius: 8px;
        background: rgba(26, 26, 26, 0.7);
        z-index: 99;
        top: 0;
        cursor: pointer;

      }
    }

    img {
      margin-right: 8px;
      width: 89px;
      height: 89px;
      border-radius: 8px;
    }

    .el-icon {
      font-size: 30px;
      color: #9e9e9e;
      cursor: pointer;

    }
  }

  .img_top {
    // margin-left: 40px;
    // text-align: center;
    // margin-left: 30px;
    background: #000;
    width: 640px;
    height: 445px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
    }
  }
}

.szan {
  // margin-top: 40px;
  height: 40px;
  // border-bottom: 2px solid #ccc;
  // text-align: center;
  line-height: 40px;
  display: flex;
  align-items: center;

  img {
    cursor: pointer;
    width: 25px;
    height: 25px
  }
}

.image {
  width: 100%;
  height: 100px;

  img {
    margin-left: 15px;
    margin-top: 10px;
  }
}



.cen_text {
  width: 100%;
  height: 140px;
  display: -webkit-box;
  /* 将元素视为块级盒子 */
  -webkit-line-clamp: 3;
  /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  /* 设置文本排列方向为垂直 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分用省略号表示 */
  font-size: 18px;
  line-height: 45px;
  word-wrap: break-word;
  word-break: break-all;
}

// .cen_textss {
//   width: 100%;
//   font-size: 18px;
//   line-height: 45px;
// }

.onebox {
  width: 100%;
  height: 100vh;
  display: flex;
  margin: 10px 10px;
  background: #fff;
}

.cen_time {
  width: 100px;
  // padding: 0 10px;
  text-align: right;
  margin-right: 40px;
  // flex: 1;
}

.centertexts {
  width: 1000px;
  padding: 0 20px 0 0;
}

.cen_textss {
  width: 100%;
  font-size: 18px;
  line-height: 45px;
  word-wrap: break-word;
  word-break: break-all;
}

.zan {
  margin-top: 40px;
  height: 40px;
  // border-bottom: 2px solid #ccc;
  // text-align: center;
  line-height: 40px;
  display: flex;
  justify-content: center;
  font-size: 20px;
}

.tjindex {
  text-align: center;
  margin: 20px 0;
}

.daymonth {
  margin-top: 10px;

  .daytian {
    font-size: 18px;
    margin-right: 10px;
  }

  .month {
    font-size: 13px;
  }
}
</style>
